<template>
	<view class="cart">
		<view class="title-page">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar">

			</view>
			<view class="title">
				购物车
			</view>
		</view>
		<view class="content" :style="contentStyle">
			<view class="hint-block">
				最快18分钟送达
			</view>

			<view v-if="commodityLst.length>0">
				<cart-block @itemClick='cartClick' @edit='editCartClick' :btnState='btnState' :cartData='commodityLst'
					@itemCheck='itemCheck' @countChange='countChange'>
				</cart-block>
			</view>
			<view style="text-align: center;margin-top: 24rpx;font-size: 26rpx;color: #999;"  v-if="commodityLst.length==0">暂无商品添加到购物车</view>
			<commend @itemClick='commendClick'></commend>
			<view style="height: 120rpx;"></view>
		</view>
		<view class="fixed-block">
			<view class="edit-block" @tap="allCheckClick">
				<view class="check-img" v-if="allCheck==false"></view>
				<view class="check-icon center" v-if="allCheck==true">
					<image :src="checkIcon" class="auto-img"></image>
				</view>
				<view class="txt">全选</view>
			</view>
			<view class="right-info-block">
				<template v-if="btnState">
					<view class="total">总计:</view>
					<view class="price">
						<span>¥</span>
						<view class="money">{{price}}</view>
					</view>
				</template>
				<view class="btn" @tap="btnStateClick">
					{{btnState?'去结算':'删除'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commend from '@/pages/tabbar/cart/components/commend.vue'
	import cartBlock from '@/pages/tabbar/cart/components/cartBlock.vue'
	export default {
		components: {
			commend,
			cartBlock
		},
		data() {
			return {
				statusBarHeight: 20,
				contentStyle: '',
				btnState: true,
				checkIcon: require('@/static/cart/check.png'),
				commodityList: {}, //商品数据
				commodityLst: [],
				allCheck: true,
				count: 0, //选择的商品数量
				price: 0, //选择的商品总价格
				page: 0,
			}
		},
		onShow() {
			this.init()
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
			let contentHeight = (uni.getSystemInfoSync().statusBarHeight * 2) + 88
			let contentHeightStyle = `padding-top:${contentHeight}rpx;`
			this.contentStyle = contentHeightStyle
		},
		methods: {
			commendClick(id) {
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + id
				})
			},
			cartClick(item) {
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + item.commodity_id
				})
			},
			editCartClick(val) {
				this.btnState = val
			},
			init() {
				this.commodityLst = []
				this.$http('cart.ShoppingTrolleyFinds', {
					pager: this.page,
					token: this.$tools.getToken()
				}).then(res => {
					console.log('res', res)
					if (res.code == 200) {
						this.commodityList = res.data
						this.commodityLst = res.data.data
						this.commodityLst.forEach(item => {
							item.count = 1;
							item.isCheck = true
						})
						this.allCheck = true
						this.calculatePrice()
					}
				})
			},
			allCheckClick() {
				this.allCheck = !this.allCheck
				this.commodityLst.forEach(item => {
					item.isCheck = this.allCheck
				})
				this.calculatePrice()
				// if(this.allCheck==true){
				// }
			},
			//是否全选
			isCheckFun() {
				this.commodityLst.forEach(item => {
					if (item.isCheck == true) {
						this.allCheck = true
					} else {
						this.allCheck = false
					}
				})
			},
			//取消--选中商品
			itemCheck(val, index) {
				// console.log('val', !val)
				// console.log('index', index)
				this.commodityLst[index].isCheck = !val
				this.$forceUpdate()
				this.isCheckFun()
				this.calculatePrice()
			},
			//商品数量发生改变
			countChange(val, index) {
				this.commodityLst[index].count = val
				this.$forceUpdate()
				this.calculatePrice()
			},
			//计算价格
			calculatePrice() {
				this.count = 0;
				this.price = 0;
				for (var i = 0; i < this.commodityLst.length; i++) {
					if (this.commodityLst[i].isCheck) {
						var price = this.commodityLst[i].product_price / 100; //规格价格
						var count = this.commodityLst[i].count; //数量
						this.count++
						this.price = this.price + (price * count)
					}
				}
			},
			/**
			 * 去结算/删除
			 */
			btnStateClick() {
				let isLogin = this.$tools.isLogin()
				console.log('token', isLogin)
				if (isLogin == false) {
					setTimeout(res => {
						this.$tools.showMsg('请登录')
					}, 600)
					uni.switchTab({
						url: '/pages/tabbar/user/user'
					})
				} else {
					if (this.btnState == false) {
						//删除
						this.delCommodityLst()
					} else {
						this.cartSumbit()
					}
				}
			},
			/**
			 * 购物车结算
			 */
			cartSumbit() {
				var orderArr = []; //订单数据
				for (var i = 0; i < this.commodityLst.length; i++) {
					if (this.commodityLst[i].isCheck) {
						orderArr.push(this.commodityLst[i])
					}
				}
				if (orderArr.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: "none"
					})
					return;
				}
				uni.setStorageSync("orderArr", orderArr);
				uni.navigateTo({
					url: "/pages/submit/submit?isShoppingTrolley=1"
				})
			},
			/**
			 * 删除商品
			 */
			delCommodityLst() {
				let ids = []
				this.commodityLst.forEach(item => {
					if (item.isCheck == true) {
						ids.push(item.product_id)
					}
				})
				if (ids.length > 0) {
					// console.log('ids', ids)
					// console.log('idss', JSON.stringify(ids))
					// return
					this.$http('order.shoppingTrolleyDelete', {
						token: this.$tools.getToken(),
						idss: JSON.stringify(ids)
					}).then(res => {
						// console.log('res', res)
						if (res.code == 200) {
							this.init()
						}
					})
				} else {
					this.$tools.showMsg('请选择要删除的商品')
				}
			}
		}
	}
</script>
<style>
	page {
		background: #FAFAF5FF;
	}
</style>
<style lang="scss" scoped>
	.title-page {
		background: #fff;
		position: fixed;
		width: 100%;
		z-index: 999;
	}

	.uni-status-bar {
		height: 20px;
	}

	.title {
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		height: 88rpx;
		color: rgba(0, 0, 0, 1);
	}

	.content {
		margin-bottom: 100rpx;

		.hint-block {
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(180deg, rgba(255, 251, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(203, 60, 40, 1);
		}

	}

	.fixed-block {
		position: fixed;
		width: 100%;
		bottom: 0;

		height: 88rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx -2rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
		display: flex;
		align-items: center;

		z-index: 999;

		.edit-block {
			flex: none;
			display: flex;
			align-items: center;
			margin-left: 24rpx;

			.check-img {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				border: 2rpx solid #CACACAFF;
			}

			.check-icon {
				flex: none;
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
			}

			.txt {
				margin-left: 16rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(27, 25, 25, 1);
			}
		}

		.right-info-block {
			margin-right: 24rpx;
			flex: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.total {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
			}

			.price {
				margin-left: 12rpx;
				display: flex;
				align-items: center;
				color: rgba(203, 60, 40, 1);

				span {
					font-size: 28rpx;
				}

				.money {
					font-size: 36rpx;
				}
			}

			.btn {
				margin-left: 32rpx;
				background: linear-gradient(128.5deg, rgba(250, 229, 104, 1) 0%, rgba(255, 200, 47, 1) 100%), linear-gradient(135.25deg, rgba(248, 220, 89, 1) 0%, rgba(246, 188, 87, 1) 100%), rgba(204, 204, 204, 1);
				font-size: 26rpx;
				font-weight: 500;
				line-height: 60rpx;
				text-align: center;
				color: rgba(255, 255, 255, 1.0);
				border-radius: 718rpx;
				width: 132rpx;
			}
		}
	}
</style>
